<template>
  <div class="login subpage">
    <My-head title="登录" :carthave="true"></My-head>

   <div class="mylogin">
        <!-- 2种登录方式 -->
        <van-tabs v-model="active" title-active-color="deeppink" swipeable sticky>
            
            <!-- 1. 账密登录 -->
        <van-tab title="用户名登录" name="1">
            <Login-account></Login-account>
        </van-tab>
        
        <!-- 2. 手机号+验证码 -->
        <van-tab title="手机号登录" name="2">
            <Loginsms></Loginsms>
        </van-tab>

        </van-tabs>
   </div>

  </div>
</template>

<script>
import LoginAccount from './loginAccount.vue'
import Loginsms from './loginsms.vue'

export default {
    data () {
        return {
            active: '1'
        }
    },
    components: {
        LoginAccount,
        Loginsms
    }
}
</script>

<style lang="scss" scoped>

.login {
    background-color: rgb(248, 246, 246);
    ::v-deep .van-tabs__line {
      background-color: deeppink;
    }
}

.mylogin {
    padding: 40px 20px 0 20px;
}

</style>